import React, {Component} from 'react'

import {Input,Button,Table} from 'antd'

import {Link as Linko} from 'react-router-dom'

import api from '../../common/request'

import ReactEcharts from 'echarts-for-react';

import './index.styl'

const { TextArea } = Input;

export default class Editor extends Component{
  constructor(props){
    super(props);
    
    this.state={
      dh:'',
      title:'',
      bum:0,
      source:'',
      advice:'',
      overview:'',
      titles:{},
      briefingName:'',
      headStyle:'',
      id:'',
      organizationName:'',
      periods:'',
      suggestion:'',
      website:[],
      allNum:0,
      websiteLeader:'',
      peiData:[],
      bardata:[],
      bardataX:[],
      importantOpinion:[]
    }
    this.saveBiref=this.saveBiref.bind(this);
    this.vauleChange=this.vauleChange.bind(this)
  }
  componentDidMount(){
    this.getInfo()

  }
  //保存数据
  vauleChange(e){
    this.setState({[e.target.name]:  e.target.value});

  }
  //保存简报
  saveBiref(){
    api.birefUpdate(this.state.briefingName,this.state.headStyle,this.state.id,this.state.periods,this.state.suggestion,this.state.organizationName,this.state.titles).then(res=>{
      if(res.data.success){
        this.props.history.push('/briefList')
      }
    })
  }
  async getInfo(){
    console.log(this.props.location.search.substr(4))
    let id=this.props.location.search.substr(4)
    await this.setState({
      id:id
    })
    await api.birefInfo(this.state.id).then(res=>{
      if(res.data.success){
        let allNum=this.state.allNum
        let arr=[]
        let importantOpinion=JSON.parse(res.data.data.importantOpinion)
        importantOpinion.map((item,index)=>{
          return item.key=index+1
        })
        let obj={}
        let wetArr=[]
        if( JSON.parse(res.data.data.website.length)>0){
          JSON.parse(res.data.data.website).forEach(function(e) {
            obj.name=e.websiteName
            obj.value=e.doc_count
            wetArr.push(obj)
            
            allNum+=e.doc_count
          }, this);
        }
        if(JSON.parse(res.data.data.liveness.length)>0){
          JSON.parse(res.data.data.liveness).forEach(e=>{
            arr.push(e.name)
          })
        }
  
        this.setState({
          briefingName:res.data.data.briefingName,
          headStyle:res.data.data.headStyle,
          organizationName:res.data.data.organizationName,
          periods:res.data.data.periods,
          suggestion:res.data.data.suggestion,
          titles: JSON.parse(res.data.data.titles),
          website: JSON.parse(res.data.data.website),
          source:res.data.data.websiteLeader,
          allNum:allNum,
          peiData:wetArr,
          bardata:res.data.data.liveness,
          bardataX:arr,
          importantOpinion:importantOpinion
        })
      }
    })
  }
  //本期导读
  renType(){
    let tpl='';
    this.state.website.map((item)=>{
      return tpl+=item.websiteName+item.doc_count+"篇,占比"+parseFloat(item.doc_count/this.state.allNum).toFixed(2)*100+"%"
      });
    return tpl
  }
  //监测概述
  renoverview(){
    let tpl='';
    let len=this.state.importantOpinion.length;
    let arr1=0
    let arr2=0
    this.state.importantOpinion.map((item)=>{
      if(item.positiveOrNegative==='0'){
        arr1++
      }else{
        arr2++
      }
      return tpl='监测主题相关信息'+len+'条,其中敏感'+ arr2 + '条,敏感占比'+parseFloat(arr1/len).toFixed(2)*100 +'%,非敏感'+arr1+'条,非敏感占比'+parseFloat(arr2/len).toFixed(2)*100+'%'
    })
    return tpl
  }
  getOption() {
    return {
      color:'red',
      title : {
        text: '媒体来源占比',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问']
    },
    series : [
        {
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:this.state.peiData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  };
}
getOptionbar() {
  return {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        containLabel: true,
        left: '3%',
    },
    xAxis : [
        {
            type : 'category',
            data : this.state.bardataX,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            type:'bar',
            data:this.state.bardata
        }
    ]
};
}
  render(){
    const columns = [
      {
        title: '序列',
        dataIndex: 'key',
        key: 'key',
      },{
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    }, {
      title: '日期和来源',
      dataIndex: 'time',
      render:(text, record)=>(
        <div>
          <div>{record.poTime}</div>
          <div>{record.source===""?record.webSite:record.source}</div>
        </div>
      )
    }, {
      title: '属性',
      dataIndex: 'positiveOrNegative',
      key: 'positiveOrNegative',
      render:(text, record)=>(
        <div>
          <div>{record.positiveOrNegative==='0'?'敏感':'非敏感'}</div>
        </div>
      )
    }];
    return(
      <div className="editor">
        <div className="e-title">
          <div>编辑简报</div>
          <div className="e-btn">
            <Button onClick={this.saveBiref}>保存简报</Button>
            <Button><Linko to='briefList'>取消</Linko></Button>
          </div>
        </div>
        <div className="e-input">
          <div>
            <Input style={{width:'200px'}} value={this.state.briefingName} name='briefingName' onChange={this.vauleChange}/>
          </div>
          <div></div>
            <div>
              <span>
                第
              </span>
              <Input style={{width:'50px'}} value={this.state.periods} name='periods' onChange={this.vauleChange}/>
              <span>期</span>
            </div>
            <div>
              <Input style={{width:'200px'}} value={this.state.organizationName} name='organizationName' onChange={this.vauleChange}/>
            </div>
        </div>
        <div className="e-info">
          <div>
            <Input value={this.state.titles.title1} style={{width:'120px'}} name='title1' onChange={this.vauleChange} />
            <div>本报告就加入素材的文章进行分析，共有{this.state.allNum}篇相关素材。{this.renType()},目前主要的报道集中在{this.state.source}等几大站点。详细报告请继续浏览。</div>
          </div>
          <div>
          <Input value={this.state.titles.title2} style={{width:'120px'}} name='title2' onChange={this.vauleChange}  />
            <div>
              <TextArea rows={4} value={this.state.suggestion} name='suggestion' onChange={this.vauleChange}/>
            </div>
          </div>
          <div>
          <Input value={this.state.titles.title3} style={{width:'120px'}}  name='title3' onChange={this.vauleChange}/>
            <div></div>
          </div>
          <div>
          <Input value={this.state.titles.title31} style={{width:'120px'}}  name='title31' onChange={this.vauleChange}/>
            <div>
              {this.renoverview()}
            </div>
          </div>
          <div>
          <Input value={this.state.titles.title32} style={{width:'120px'}} name='title32' onChange={this.vauleChange}/>
            <div>              <ReactEcharts option={this.getOption()}
              ></ReactEcharts></div>
          </div>
          <div>
          <Input value={this.state.titles.title33} style={{width:'120px'}}  name='title33' onChange={this.vauleChange}/>
            <div className="e-bar">
            <ReactEcharts option={this.getOptionbar()}
              ></ReactEcharts>
            </div>
          </div>
          <div>
          <Input value={this.state.titles.title4} style={{width:'120px'}}  name='title4' onChange={this.vauleChange}/>
            <div>
              <Table rowKey='id' dataSource={this.state.importantOpinion} columns={columns} pagination={false}></Table>
            </div>
          </div>
        </div>
      </div>
    )
  }
}